<template>
  <div class="item-father" :id="'ltf' + layoutData.id">
    <p class="item-title">{{layoutData.config.title.name}}</p>
    <div class="item" @mousedown.prevent="move" :id="'lt' + layoutData.id">
      <echart-model class="echart-model" v-if="layoutData.config.echarts.type !=='null'" :layoutData="layoutData">
      </echart-model>
      <div class="zoom-del" @mousedown.stop="" @click.prevent="delLayout()" title="删除布局"></div>
      <div class="zoom-set" @mousedown.stop="" @click.prevent="setLayout()" title="编辑布局"></div>
      <div class="zoom-div" @mousedown.stop.prevent="zoomMove"></div>
    </div>
    <set-model ref="setForm" :layoutData="layoutData"></set-model>
  </div>
</template>

<script>

  import echartModel from '@/components/echarts/echartModel'
  import setModel from '@/components/setModel'

  export default {
    name: "Home",

    components: {
      echartModel,
      setModel,
    },


    props: ['layoutData', 'percent'],

    data() {
      return {
        positionX: this.layoutData.top,
        positionY: this.layoutData.left,
      }
    },

    watch: {
      percent() {
        this.init()
      },
      layoutData: {
        handler(newval, oldval) {
          this.$nextTick(() => {
            this.setTitleStyle()
          })
        },
        deep: true,
        immediate: true
      },
    },

    mounted() {
      this.init()
    },

    methods: {

      // 初始化单布局大小位置
      init() {
        this.$nextTick(() => {
          let w = document.getElementById('ltf' + this.layoutData.id)
          if (!this.percent) {  // 像素值展示
            w.style.height = this.layoutData.height + 'px'
            w.style.width = this.layoutData.width + 'px'
            w.style.top = this.layoutData.top + 'px'
            w.style.left = this.layoutData.left + 'px'
          } else {   // 百分比展示
            w.style.height = this.layoutData.heightPercent + '%'
            w.style.width = this.layoutData.widthPercent + '%'
            w.style.top = this.layoutData.topPercent + '%'
            w.style.left = this.layoutData.leftPercent + '%'
          }
          this.setTitleStyle()
        })
      },

      // 设置标题样式
      setTitleStyle() {
        let w = document.getElementById('ltf' + this.layoutData.id)
        let titleDom = w.firstChild
        let titleStyle = this.layoutData.config.title
        titleDom.style.fontSize = titleStyle.fontSize + 'px'
        titleDom.style.fontWeight = titleStyle.fontWeight
        titleDom.style.top = titleStyle.top + '%'
        titleDom.style.left = titleStyle.left + '%'
        titleDom.style.color = titleStyle.color
      },

      // 布局缩放
      zoomMove(e) {
        let zdiv = e.target.parentElement;
        let fdiv = zdiv.parentElement;
        let pro = fdiv.parentElement
        let fatherDomW = pro.offsetWidth
        let fatherDomH = pro.offsetHeight
        document.onmousemove = (ev) => {
          let w = ev.clientX - this.layoutData.left
          let h = ev.clientY - this.layoutData.top
          if (w < 250) {
            w = 250
          }
          if (h < 200) {
            h = 200
          }
          fdiv.style.width = w + 5 + 'px';
          fdiv.style.height = h - 50 + 5 + 'px';

          this.layoutData.width = w + 5
          this.layoutData.height = h - 50 + 5
          this.layoutData.widthPercent = ((w + 5) / fatherDomW) * 100
          this.layoutData.heightPercent = ((h - 50 + 5) / fatherDomH) * 100

          this.$emit('changeFinish', this.layoutData)
        };
        document.onmouseup = (ev) => {
          document.onmousemove = null;
          document.onmouseup = null;
        };

      },

      // 布局拖动
      move(e) {
        let odiv = e.target.parentElement;        //获取目标元素
        let father = odiv.parentElement
        let fatherDomW = father.offsetWidth
        let fatherDomH = father.offsetHeight
        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft;
        let disY = e.clientY - odiv.offsetTop;
        document.onmousemove = (e) => {       //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX;
          let top = e.clientY - disY;
          if (left < 0) {
            left = 0
          }
          if (top < 0) {
            top = 0
          }
          if (fatherDomW < left + odiv.offsetWidth) {
            left = fatherDomW - odiv.offsetWidth
          }
          if (fatherDomH < top + odiv.offsetHeight) {
            top = fatherDomH - odiv.offsetHeight
          }
          //绑定元素位置到positionX和positionY上面
          this.positionX = top;
          this.positionY = left;
          //移动当前元素
          odiv.style.left = left + 'px';
          odiv.style.top = top + 'px';
          this.layoutData.top = top
          this.layoutData.left = left

          this.layoutData.topPercent = (top / fatherDomH) * 100
          this.layoutData.leftPercent = (left / fatherDomW) * 100
          this.$emit('changeFinish', this.layoutData)
        };
        document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      },

      // 布局删除
      delLayout() {
        this.$emit('delLayout', true)
      },

      setLayout() {
        this.$refs.setForm.init()
      }

    },
  };
</script>
<style scoped>
  .item-father {
    position: absolute;
    width: 300px;
    height: 220px;
  }



  .item {
    width: 100%;
    height: 100%;
    background-color: rgba(95, 158, 160, 0.7);
    cursor: move;
    border: 1px solid chartreuse;
  }

  .zoom-div {
    width: 5px;
    height: 5px;
    background-color: bisque;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .zoom-div:hover {
    background-color: beige;
    cursor: se-resize;
  }

  .zoom-del {
    opacity: 0.6;
    width: 10px;
    height: 10px;
    background-color: #f56c6c;
    border-radius: 10px;
    position: absolute;
    top: 3px;
    right: 3px;
    cursor: pointer;
  }

  .zoom-del:hover {
    opacity: 1;
  }

  .echart-model {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .zoom-set {
    position: absolute;
    top: 3px;
    right: 20px;
    opacity: 0.6;
    width: 10px;
    height: 10px;
    background-color: #409eff;
    border-radius: 10px;
    cursor: pointer;
  }

  .zoom-set:hover {
    opacity: 1;
  }

  .item-title {
    margin: 0;
    position: absolute;
  }
</style>